<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		
		.wrap {
			height: 170px;
			width: 490px;
			margin: 160px auto;
			overflow: hidden;
			position: relative;
			
		}
		
		.wrap ul {
			position: absolute;
			right: 200px;
			bottom: 10px;
			display: flex;
		}
		
		.wrap ul li {
			height: 10px;
			width: 10px;
			background: white;
			border: solid 1px #666;
			margin-left: 5px;
			border-radius: 50%;
		}	
		</style>
		
		<script type="text/javascript">
			window.onload = function() {
						var wrap = document.getElementById("wrap");
						var im=document.getElementById("img")
						index = 0;
						timer = null;
			
						
						timer = setInterval("autoPlay()", 1000);
			
					
						wrap.onmouseover = function() {
							clearInterval(timer);
						}
			
						
						wrap.onmouseout = function() {
							timer = setInterval(autoPlay, 1500);
						}
			
						function autoPlay() {
							var list=document.getElementById("list").children;
							for (var i = 0; i < list.length; i++) {
								if(i!=index){
									list[i].style.backgroundColor="white";
								}
							}
							list[index].style.backgroundColor="red";
							index++;
							changePic(index);
							if(index==5){
								index=0;
							}
						}
						function changePic(curIndex) {
							im.setAttribute("src","image/"+curIndex+".jpg")
						}
					}
		</script>
	</head>
	<body>
		<div class="wrap" id="wrap">
			<img src="image/1.jpg" id="img">
			<ul id="list">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>